<template>
  <div style="position: fixed;z-index:100">
    <TitleLenged
              :isShow="isShowTitle"
              :titleText="titleText"
            ></TitleLenged>
             <MapLenged  :isShow="isShowLenged"
      :lengedData="lengedData"></MapLenged>
    <rasterdown  :title="r_title"
      :modal2Visible="r_visible"
      :percent="r_precent"></rasterdown>
    <!---->
    <div style="width:320px;position: fixed;bottom:20px;left: 10px;">

      <div class="panel b-primary">
        <div class="panel-heading b-b b-light">
          数据列表
        </div>
        <div
          class="panel-body"
          :style="{height: (contentHeight*0.6)+'px' }"
          style="overflow-y: scroll"
        >
          <a-skeleton
            active
            :loading="loading"
          >
            <a-directory-tree
              
              defaultExpandAll
              @select="onSelect"
              @expand="onExpand"
            >

              <a-tree-node  v-for="(item) in treeNode"
                :title="item.name"
                v-bind:key="item.key"
              >
                 <template v-if="item.hasChild">
<a-tree-node v-for="citem in item.child"
                  :title="citem.name"
                  :key="citem.key"
                  isLeaf
                />
                 </template>
                
              </a-tree-node>
              
            </a-directory-tree>
          </a-skeleton>

        </div>
        <div class="panel-footer">
          <div style="
    text-align: center;
"><button class="btn btn-rounded btn-stroke btn-success" @click="calbtn">模型计算</button></div>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import rasterdown from '../canvas/rasterdown.vue';
import { mapGetters, mapActions } from 'vuex';
import TitleLenged from '../mainContent/TitleLenged.vue';
import MapLenged from '../mainContent/MapLenged.vue';
let lenged_config = require('../../config/lengedConfig');
import * as mapOper from '../../scripts/mapOper.js';
export default {
  name: 'R10201',
  data() {
    return {
      loading: true,
      r_title:'hello',
      r_visible:false,
      r_precent:0,
      // 是否显示标题
      isShowTitle: false,
      // 标题内容
      titleText: '',
      //是否显示图例
      isShowLenged:false,
      //图例内容
      lengedData:[],
      selectedKey:'',
      treeNode:[
        {key:'2018',
          name:'2018年',
          hasChild:true,
          child:[
            {key:'2018-06',
              name:'2018-06'}
          ]
        },
        {key:'2017',
          name:'2017年',
          hasChild:true,
          child:[
            {key:'2017-06',
              name:'2017-06'}
          ]
        },
        {key:'2016',
          name:'2016年',
          hasChild:true,
          child:[
            {key:'2016-06',
              name:'2016-06'}
          ]
        },
        {key:'2015',
          name:'2015年',
          hasChild:true,
          child:[
            {key:'2015-06',
              name:'2015-06'}
          ]
        },
        {key:'2014',
          name:'2014年',
          hasChild:true,
          child:[
            {key:'2014-06',
              name:'2014-06'}
          ]
        },
        {key:'2013',
          name:'2013年',
          hasChild:true,
          child:[
            {key:'2013-06',
              name:'2013-06'}
          ]
        },
        {key:'2012',
          name:'2012年',
          hasChild:true,
          child:[
            {key:'2012-06',
              name:'2012-06'},
          
          ]
      
        },
        {key:'2011',
          name:'2011年',
          hasChild:true,
          child:[
            {key:'2011-06',
              name:'2011-06'},
     
          ]
        },
      ],
    };
  },
  components: {
    rasterdown,
    TitleLenged,
    MapLenged
  },
  computed: { ...mapGetters(['map', 'contentHeight']) },
  mounted() {
    /**
     * 清除地图
     */
    if (this.map) {
      let map = mapOper.removeAllLayers(this.map);
      this.changeMap({ map: map });

      let imap = mapOper.removeInteractions(this.map);
      this.changeMap({ map: imap });
      let omap = mapOper.removeAllOverlay(this.map);
      this.changeMap({ map: omap });
    }
    setTimeout(() => {
      this.loading = false;
    }, 3000);
  },
  methods: {
    ...mapActions(['changeMap', 'changeLengedTitle']),
    onSelect(keys) {
      //console.log('Trigger Select', keys);
      if(keys.length==1){
        this.selectedKey=keys[0];
      }
      
    },
    onExpand() {
      console.log('Trigger Expand');
    },
    calbtn(){
      if(this.selectedKey==''){
        return;
      }
      this.r_visible=true;
      this.r_precent=0;
      let intervalinst=setInterval(()=>{
        this.r_precent+=1;
        
        if(this.r_precent>3){
          
          clearInterval(intervalinst);
          this.r_visible=false;
          //----------------------------------
         
          this.isShowTitle = true;
          let titleyear = this.selectedKey.split('-');
          this.titleText =
        '乌海' + titleyear[0] + '年' + titleyear[1] + '月地表温度分析结果';
          let mapfileName='wuhai-raster';
          let params = {
            map: this.map,
            mapfile:mapfileName,
            layerName: 'wuhai_LST_' + this.selectedKey,
            coordinate:[36401859.825, 4371259.970]
          };
          let map = mapOper.loadRasterLayer(params);
          this.changeMap({ map: map });
          this.isShowLenged=true;
          this.lengedData=lenged_config.LSTLenged;
        }
            
      },4000);

        
    }
  }
};
</script>

